<template>
  <div class="box">
    <!-- 左按钮，跳转到我的页面 -->
    <van-nav-bar title="退换/售后" left-arrow  @click-left="fun1">
      <template #right>
        <van-icon name="ellipsis" size="26" @click="fun" />
        <div class="box1" v-if="flag">
          <div class="dv">
            <p><van-icon name="home-o" size="17" /></p>
            <div>首页</div>
          </div>
          <div class="dv">
            <p><van-icon name="apps-o" size="17" /></p>
            <div>分类搜索</div>
          </div>
          <div class="dv">
            <p><van-icon name="cart-o" size="17" /></p>
            <div>购物车</div>
          </div>
          <div class="dv">
            <p><van-icon name="contact" size="17" /></p>
            <div>我的京东</div>
          </div>
          <div class="dv">
            <p><van-icon name="browsing-history-o" size="17" /></p>
            <div>浏览记录</div>
          </div>
          <div class="dv">
            <p><van-icon name="share-o" size="17" /></p>
            <div>分享</div>
          </div>
        </div>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="售后申请">
        <van-search
          placeholder="商品名称/商品编号/订单编号/序列号"
          right-icon="filter-o"
        />
        <div class="img">
          <img src="@/assets/sale1.jpg" alt="" width="355px" height="62px" />
        </div>
      </van-tab>
      <van-tab title="处理中">
        <van-search
          placeholder="商品名称/商品编号/订单编号/序列号"
          right-icon="filter-o" />
        <div class="img">
          <img
            src="@/assets/sale2.jpg"
            alt=""
            width="355px"
            height="62px"
          /></div
      ></van-tab>
      <van-tab title="售后评价">
        <van-search
          placeholder="商品名称/商品编号/订单编号/序列号"
          right-icon="filter-o" />
        <div class="img">
          <img
            src="@/assets/sale3.jpg"
            alt=""
            width="355px"
            height="62px"
          /></div
      ></van-tab>
      <van-tab title="申请记录">
        <van-search
          placeholder="商品名称/商品编号/订单编号/序列号"
          right-icon="filter-o" />
        <div class="img">
          <img
            src="@/assets/sale3.jpg"
            alt=""
            width="355px"
            height="62px"
          /></div
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      flag: false,
    };
  },
  methods: {
    fun() {
      this.flag = !this.flag;
    },
    // 跳转到我的页面
    fun1() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.img {
  text-align: center;
}
.box1 {
  width: 125px;
  height: 240px;
  /* background-color: #eee; */
  background-color: black;
  opacity: 0.9;
  border-radius: 5px;
  position: absolute;
  top: 44px;
  right: 10px;
  z-index: 999;
}
.box1 .dv {
  display: flex;
  width: 125px;
  height: 40px;
  color: #fff;
  font-size: 14px;
}
.dv div {
  border-bottom: 1px solid #eee;
  width: 85px;
  line-height: 40px;
}

.dv p {
  width: 40px;
  text-align: center;
}
</style>